<template>
   <div class="info-frame">  
    <el-button type="primary" size="small" class="btn-update" @click="updateMovie">编辑影片</el-button>
    <el-descriptions title="影片信息" :column="2">
      <el-descriptions-item label="标题">{{ movieDetail.title }}</el-descriptions-item>
      <el-descriptions-item label="主演">{{ movieDetail.actors }}</el-descriptions-item>
      <el-descriptions-item label="导演"> <el-tag size="small">{{ movieDetail.director }}</el-tag></el-descriptions-item>
      <el-descriptions-item label="语言">{{movieDetail.language}}</el-descriptions-item>
      <el-descriptions-item label="放映" >{{movieDetail.release}} </el-descriptions-item>
      <el-descriptions-item label="类型">
        
          <template  v-for="(item,index) in typeList">
            <el-tag size="small" :key="index" v-if="movieDetail.movieType.includes(item.id)">
              {{ item.name }}
            </el-tag>
          </template>
       
      </el-descriptions-item>
      <el-descriptions-item label="放映时长">
        <el-tag size="small">{{ movieDetail.duration }}</el-tag>
      </el-descriptions-item>
     
      <el-descriptions-item label="评分">
        <el-tag size="small">{{ movieDetail.score }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="剧情简介" :span="2">
        
        <div v-html="movieDetail.desc"></div>
      </el-descriptions-item>
      
      
  </el-descriptions>

  
  <ul class="img-list">
    <li v-if="movieDetail.imgSrc">
        <span>主演：</span>    <img :src="movieDetail.imgSrc" alt="">
    </li>
    <li v-if="movieDetail.posterSrc">
     <span>电影海报：</span>   <img :src="movieDetail.posterSrc" alt="">
    </li>
    <li v-if="movieDetail.trailerLink">
     <span>宣传片：</span>   <video :src="movieDetail.trailerLink"></video>
    </li>
  </ul>

  <h3>影评</h3>
  <div class="comment-box">
    <p v-for="(item,index) in movieDetail.comments">

    {{index+1}}. {{ item }}
    </p>
  </div>

   </div>
</template>

<script>
import axiosEl from '@/utils/axios';
export default {
  data(){
    return {
      movieDetail:{},
      typeList:[]
    }
  },
   methods:{
     async getMovieDetail(){
       let resDetail = await  axiosEl.get('/movie/detail/'+this.did);
       
       console.log(resDetail);
       this.movieDetail = resDetail.data;
       
      },
      // 更新当前影片
      updateMovie(){
         this.$router.push({
          path:'/movie/update',
          query:{
            id:this.did
          }
         })
      },
      // 影片类型
      getMovieType(){
        axiosEl.get('/type/all').then((resData)=>{
            if(resData.code==1) {
                this.typeList = resData.data;
            }
        })
      },
   },
  mounted(){
    this.did = this.$route.query.id;
    this.getMovieDetail();
    this.getMovieType();
    
  }
}
</script>

<style lang="scss">
.info-frame {
  padding: 50px;
  position: relative;
  .btn-update {
    position: absolute;
    right: 30px;
    top: 30px;
  }
}
.img-list li {
  display: flex;
  min-height: 60px;
  
}
.comment-box {
  margin-top: 30px;
  font-size: 14px;
}
.comment-box p {
  margin-bottom: 20px;
}
</style>